<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="express-content">
			<view class="express-header">
				<image :src="expressInfo.icon" mode="" style="width: 50upx;height: 50upx;"></image>
				<text>{{expressInfo.name}}</text>
				<text>{{expressInfo.toolid}}</text>
				<view class="express-header-btn" @tap="copyText(expressInfo.toolid)">
					复制
				</view>
				<view class="express-header-btn" @tap="callPhone(expressInfo.phone)">
					拨打电话
				</view>
			</view>

			<view class="express-list">
				<view class="express-item" v-for="(item,index) in expresssList" :key="index" style="padding: 20upx;">
					<!-- <view class="">
						<image src="" mode=""></image>
					</view> -->
					<view class="" style="color: #A5A5A5;">
						<view class="" v-if="index == 0" style="color: #F3431A;">
							<text style="font-size: 36upx;margin-right: 16upx;">{{item.status}}</text>
							<text>{{item.time}}</text>
						</view>
						<view class="" v-else>
							<text style="font-size: 36upx;margin-right: 16upx;">{{item.status}}</text>
							<text>{{item.time}}</text>
						</view>
						<view class="">
							{{item.context}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" style="height: 160upx;">
			
		</view>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/pages6/components/bottom-tabbar/shop-bottom-tabbar.vue';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				title: '物流信息',
				id: 0,

				loadingType: 'more', //加载更多状态

				expressInfo: {},
				expresssList: [],
				goodsList: [],
				page: 1,
				totalCount: 0,
				isLoaded: false,

			}
		},

		components: {
			BottomTabbar,
			empty
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData()

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 600)
		},

		onLoad: function(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			uni.showLoading({
				title: '加载中...'
			});
			this.id = option.id;
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

		},
		methods: {
			async loadData() {
				this.getInfo();
			},

			//职位列表
			async getInfo() {
				let token = uni.getStorageSync('token');
				let dataObj = {
					token: token,
					id: this.id
				}

				let edata = await this.$myRequest({
					url: '/getExpressInfo',
					data: dataObj,
					methods: 'POST'
				})

				if (edata.statusCode == 200 && edata.data.status == 1) {
					this.expressInfo = edata.data.data.info;
					this.expresssList = edata.data.data.list;
				}
			},

			async copyText(text) {
				uni.setClipboardData({
					//准备复制的数据
					data: text,
					success: (res) => {
						this.$toast('复制成功！')
					}
				})
			},

			async callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.express-content {
		// #ifdef APP-PLUS
		margin-top: 182rpx;
		// #endif
		// #ifdef MP-WEIXIN
		margin-top: 182rpx;
		// #endif
		// #ifdef H5
		margin-top: 130rpx;
		// #endif
	}

	.express-header {
		height: 96upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		width: 94%;
		margin-left: 3%;
		border-radius: 15upx;
		padding: 0 18upx;
		font-size: 28upx;
		justify-content: space-between;
	}

	.express-header-btn {
		border: 2upx solid #F3431A;
		border-radius: 8upx;
		color: #F3431A;
		padding: 4upx 8upx;
	}

	.express-list {
		margin: 20upx 3%;
		background-color: #FFFFFF;
		width: 94%;
		border-radius: 15upx;
		padding: 18upx;
		font-size: 28upx;
	}

	.goods-list {
		// #ifdef APP-PLUS
		padding: 182rpx 30upx 180rpx;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 182rpx 30upx 180rpx;
		// #endif
		// #ifdef H5
		padding: 130rpx 30upx 180rpx;
		// #endif

		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background: #fff;

		.goods-item {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.isCheck {
			position: absolute;
			top: -16upx;
			left: -16upx;
		}

		.image-wrapper {
			width: 100%;
			width: 330upx;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 80upx;
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}

		.price {
			font-size: $font-base;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26upx;
			}
		}
	}

	.operator {
		position: fixed;
		bottom: 0;
		height: 150upx;
		box-shadow: 2px 3px 100px 5px #eee;
		background-color: #fff;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 21upx 40upx;
		font-size: 30upx;
		color: #545455;
	}

	.operator-left {
		line-height: 54upx;
	}

	.operator-left-bottom {
		display: flex;
		align-items: center;
	}

	.operator-button {
		height: 76upx;
		width: 196upx;
		border-radius: 38upx;
		background-color: $base-color;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
